<template>
  <div class="index">
    <van-tabs v-model="active" @change="changeNewsType">
      <van-tab title="在线问诊">
		  <div class="block"></div>
          <expert-com @handleClick="handleClick" v-for="(item,index) in list" :key="index" :list="item" :showLine="index !== (list.length - 1)" type="online"></expert-com>
      </van-tab>
      <van-tab title="预约挂号">
		  <div class="block"></div>
          <expert-com @handleClick="handleClick" v-for="(item,index) in list" :key="index" :list="item" :showLine="index !== (list.length - 1)" type="order"></expert-com>
      </van-tab>
      <van-tab title="上门服务">
		  <div class="block"></div>
          <expert-com @handleClick="handleClick" v-for="(item,index) in list" :key="index" :list="item" :showLine="index !== (list.length - 1)" type="visit"></expert-com>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs } from 'vant'
import expertCom from './components/response/index'
import API from '../../services/index'
export default {
	name: 'index',
	components: {
		VanTab: Tab,
		VanTabs: Tabs,
		expertCom,
	},
	data() {
		return {
			active: 0,
			list: [],
		}
	},
	created() {
		this.getMyService()
	},
	methods: {
		handleClick(id) {
			this.$router.push({ name: 'ServiceDetail', params: { type: this.active, id } })
		},
		async getMyService() {
			const data = await API.getMyService({
				params: {
					type: this.active,
				},
			})
			this.list = data
		},
		changeNewsType() {
			this.getMyService()
		},
	},
}
</script>

<style lang="scss">

</style>
<style lang='scss' scoped>
.index {
	.block {
		margin-left: -16px;
		width: calc(100% + 32px);
		height: 10px;
		background-color: #F5F5F5;
	}
	::v-deep .van-tab--active .van-tab__text {
		//font-weight: 100;
	}
	::v-deep .van-tabs__line {
		width: 64px;
		bottom: 20px;
	}
}
</style>
